<!--此页面为新增隐患页面-->

<template>
  <div class="no-padding app-container">
    <info-page-container class="no-padding" :show-go-back="showGoBack">
      <!--表单放入info-page-container组件的body插槽-->
      <template slot="body">
        <el-scrollbar>
          <el-form :rules="rules" :model="form" ref="form" size="small"
                   label-width="80px">
            <!--隐患分类代码输入  吕工表示先放个input即可-->
            <el-form-item class="column-item" label="隐患分类代码" prop="questionTypeCode">
              <choose-question v-model="form.questionTypeCode"></choose-question>
            </el-form-item>

            <!--检查id输入  吕工表示先放个input即可 后期可以自动生成-->
            <!--            <el-form-item class="column-item" label="所属检查id" prop="inspectId">-->
            <!--              <el-input-->
            <!--                  v-model="form.inspectId"-->
            <!--                  placeholder="请输入所属检查id"-->
            <!--                  clearable-->
            <!--              >-->
            <!--              </el-input>-->
            <!--            </el-form-item>-->

            <!--隐患描述输入-->
            <el-form-item class="column-item" label="隐患描述" prop="questionDesc">
              <el-input type="textarea" v-model="form.questionDesc" placeholder="请输入" clearable></el-input>
            </el-form-item>

            <div class="row-item flex-row">
              <!--隐患年份输入-->
              <el-form-item class="column-item half-item" label="隐患年份" prop="questionYear">
                <el-date-picker
                    v-model="form.questionYear"
                    align="right"
                    type="year"
                    value-format="yyyy"
                    placeholder="选择年">
                </el-date-picker>
              </el-form-item>

              <!--整改进度输入-->
              <el-form-item class="column-item half-item" label="整改进度" prop="schedule">
                <el-select v-model="form.schedule" placeholder="请选择整改进度" clearable>
                  <el-option
                      v-for="dict in dict.type.defect_question_schedule"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>

            <!--整改完成情况输入-->
            <el-form-item class="column-item" label="整改完成情况" prop="situation">
              <el-input type="textarea" v-model="form.situation" placeholder="请输入" clearable></el-input>
            </el-form-item>

            <!--整改建议输入-->
            <el-form-item class="column-item" label="整改建议" prop="suggestion">
              <el-input type="textarea" v-model="form.suggestion" placeholder="请输入" clearable></el-input>
            </el-form-item>


            <!--附件上传-->
            <el-form-item class="column-item annex-box" label="文件列表" prop="fileIds">
              <template slot="label">
                文件列表
                <el-button class="file-upload-bt" icon="el-icon-refresh" size="mini"
                           @click="upload">上传文件
                </el-button>
              </template>
              <show-file-list :file-list="fileList" @delFile="delFile"></show-file-list>
            </el-form-item>
          </el-form>
        </el-scrollbar>
      </template>
      <template slot="footer">
        <el-button v-if="form.id != null" @click="removeInspect" icon="el-icon-delete" size="mini" type="danger">删除
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="saveDraft">保存草稿</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">保存并提交</el-button>

      </template>
    </info-page-container>
  </div>
</template>

<script>
//引入文件上传模块
import {UploadFileObj} from "@/utils/uploadFile";
import ShowFileList from "@/components/ShowFileList/index.vue";
import {isArr} from "@/utils/arrayUtil";
import guid from "@/utils/guid";

//引入接口
import {
  getDefectQuestionInfoById,  //  获取隐患详情
  addDefectQuestion,   // 新增问题隐患
  submitDefectQuestion, // 新增问题隐患并提交
  updateDefectQuestion,  //  更新问题隐患
  updateAndSubmitDefectQuestion,  // 更新问题隐患并提交
  delDefectQuestion, //  删除问题隐患

} from "@/api/securityCheck/defect/defectQuestion.js";
import {subInfoPageMixins} from './subInfoPageMixins'
import ChooseQuestion from "@/views/securityCheck/components/chooseQuestion.vue";

export default {
  name: "defectQuestion_edit",

  mixins: [subInfoPageMixins],
  dicts: ['defect_question_schedule'],
  components: {
    ChooseQuestion,
    ShowFileList
  },
  data() {
    return {
      uid: `file_${guid()}`,
      form: {
        id: null,
        fileIds: [],
        inspectId: this.inspectInfo.id,
        nodeSerialNo: this.nodeSerialNo,
        instanceNo: this.instanceNo,
        questionDesc: null,
        questionTypeCode: null,
        questionYear: null,
        schedule: null,
        situation: null,
        suggestion: null,
      },
      // 表单校验
      rules: {
        inspectBatch: [
          //设置隐患分类代码不能为空
          {questionTypeCode: true, message: "隐患分类代码不能为空", trigger: "blur"} //光标离开此文本框时内容不能为空
        ],
      },
    }
  },
  computed: {
    fileList() {
      let res = this.$store.state.temporaryFile.temporaryFileList
      return isArr(res) && res.some(item => item.uid == this.uid) ? res.find(item => item.uid == this.uid).fileList : []
    }
  },
  watch: {
    fileList(val) {
      this.form.fileIds = isArr(val) ? val.map(file => file.fileId) : [];
    }
  },
  methods: {
    //上传文件按钮回调函数
    upload() {
      let uploadObj = UploadFileObj.getInstance();
      uploadObj.uploadFile('temporaryFile/addDoc', {uid: this.uid})
    },
    //删除附件列表中附件回调函数
    delFile(item) {
      let owner = this
      let {uid} = this
      this.$modal.confirm('是否确认删除该数据项？').then(function () {
        let {fileId, fileName,} = item
        owner.$store.dispatch("temporaryFile/removeProjectDoc", {uid, fileId, fileName,},).then(() => {
          owner.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      })
    },
    //删除按钮回调函数
    removeInspect() {
      let owner = this; //将当前vc赋值给owner
      //调用接口发送请求
      this.$modal.confirm('是否确认删除该数据项？').then(() => {
        //调用接口发送请求
        delDefectQuestion(this.form.id).then((res) => {
          //调用成功消息函数
          owner.$modal.msgSuccess("删除成功");
          //调用返回上一层函数
          owner.saveFinish()
        }, (err) => {
          //调用失败消息函数
          owner.$modal.msgError(`删除失败${err}`);
        })
      })
    },
    //保存草稿按钮回调函数
    saveDraft() {
      let owner = this
      //获取ref属性值为form的组件对象并调用其validate函数进行表单校验
      this.$refs["form"].validate(valid => {
        //判断表单校验是否成功，成功时valid为true
        if (valid) {
          //通过判断数据中的主键值是否为空，为空时新增，不为空时为修改
          if (this.form.id != null) {
            //调用修改专题检查接口参数为当前页面对应的数据
            updateDefectQuestion(this.form).then(response => {
              //调用成功消息函数
              owner.$modal.msgSuccess('保存草稿成功')
              //调用返回上级路由函数，使页面从修改页面返回到列表页面
              owner.saveFinish()
            });
          } else {
            //当主键为空时调用新增专题检查接口参数为当前页面对应的data中的数据
            addDefectQuestion(this.form).then(res => {
              owner.$modal.msgSuccess('保存草稿成功')
              owner.saveFinish()
            })
          }
        }
      });
    },
    //保存提交按钮回调函数
    handleAdd() {
      let owner = this
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateAndSubmitDefectQuestion(this.form).then(response => {
              owner.$modal.msgSuccess('新增成功')
              owner.saveFinish()
            });
          } else {
            submitDefectQuestion(this.form).then(res => {
              owner.$modal.msgSuccess('新增成功')
              owner.saveFinish()  //返回上一级页面
            })
          }
        }
      });
    },
    //此方法用于操作路由返回上一级
    saveFinish() {
      this.$router.back(-1)
    },


    //详情查看回调函数
    getInfoData() {
      //此处开启一个加载动画，避免详情渲染在页面上前用户对数据进行操作
      this.startLoading('正在加载....')
      let owner = this
      //调用获取隐患详情接口
      getDefectQuestionInfoById(this.form.id).then(res => {
        let {data: {fileVoList}, data} = res;  //解构
        owner.$store.dispatch('temporaryFile/addDocList', {uid: this.uid, fileList: fileVoList})
        owner.form = data
        owner.form.instanceNo= this.instanceNo;
        owner.form.nodeSerialNo= this.nodeSerialNo;
      }).finally(() => {
        owner.endLoading()  //结束加载动画
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.annex-box {
  margin-top: 20px; //用于单独设置上传文件按钮与上方元素间距
}
</style>
